<template>
  <view class="">
    <view class="top_banner">
      <text>一周内</text>
    </view>
    <view class="find">
      <view class="attention-content" v-for="(item, index) in history" :key="item.postId">
        <view class="attention-content-img" @click="as(index)">
          <image :src="item.url" mode="aspectFit" v-if="item.mediaType == 'image'" @click="as(index)"></image>
          <video :src="item.url" :controls="false" :show-center-play-btn="false" v-else @click="as(index)"></video>
        </view>
        <text class="attention-content-text" @click="as(index)">{{ item.content }}</text>
        <view class="attention-content-user">
          <view class="attention-content-user-img">
            <image :src="item.profilePrcture" mode="aspectFit" class="attention-content-user-img-image"></image>
            <text class="attention-content-user-text">{{ item.username }}</text>
          </view>
          <view class="attention-content-user-line" @click="discolor(index)" ref="redT">
            <image src="@/static/TestImg/img/indexImg/love.png" mode="aspectFit" class="attention-content-user-img-image"
              v-if="item.like"></image>
            <image src="@/static/TestImg/img/message/aixin.png" mode="aspectFit" class="attention-content-user-img-image"
              v-else></image>
            <text>{{ item.likeNum }}</text>
          </view>
        </view>
      </view>
      <view class="perch" v-if="perch"></view>
      <u-loadmore :status="status" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      size: 20,
      status: "loading",
      history: [],
    };
  },

  methods: {
    as(e) {
      uni.navigateTo({
        url: `/pages/index/viewAsText/viewAsText?postId=${this.history[e].postId}&mediaType=${this.history[e].mediaType}&followeeId=${this.history[e].userId}`,
      });
    },
    onPageScroll(e) {
      console.log(e);
      const currentScrollTop = e.scrollTop;
      if (currentScrollTop < this.lastScrollTop) {
        this.show = false;
      }
      this.lastScrollTop = currentScrollTop;
    },
    discolor(e) {
      console.log(this.history[e].like);
      this.history[e].like = !this.history[e].like;
      if (this.history[e].like) {
        this.request(`/like/goLike?postId=${this.history[e].postId}&userId=${uni.getStorageSync("id")}`, "post")
          .then((res) => {
            console.log(res);
            this.history[e].likeNum++;
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.request(`/like/delLike?postId=${this.history[e].postId}&userId=${uni.getStorageSync("id")}`, "delete")
          .then((res) => {
            console.log(res);
            this.history[e].likeNum--;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    gethistory() {
      this.request(`/api/history/getHistory?page=${this.page}&size=${this.size}&userId=${uni.getStorageSync("id")}`, "post")
        .then((res) => {
          if (res.data.code == 200) {
            console.log(res);
            // 清空历史记录数组
            this.history = [];
            // 合并并去重历史记录数据
            res.data.result.list.forEach((item) => {
              // 判断是否已经存在相同的 postId
              if (!this.history.some((historyItem) => historyItem.postId === item.postId)) {
                this.history.push(item);
              }
            });
            console.log(this.history);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  onLoad() {
    this.gethistory();
  },
};
</script>

<style>
	.top_banner {
		background-color: rgb(248, 248, 248);
		width: 100%;
		height: 90rpx;
		text-align: left;
		font-size: 40rpx;
		padding-left: 40rpx;
		font-weight: 600;
		position: sticky;
		top: 44px;
		z-index: 1000; /* 确保在最前面 */
	}

	.find {
		width: 750rpx;
		display: flex;
		justify-content: space-around;
		flex-direction: row;
		margin-top: 10rpx;
		flex-wrap: wrap;
	}

	.label {
		width: 100%;
		height: 60rpx;
		margin-top: 100rpx;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}

	.perch {
		width: 370rpx;
		height: 600rpx;
	}

	.attention-content {
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-left: 8rpx;
		width: 330rpx;
		height: 600rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		border-radius: 16rpx;
	}

	.attention-content-img {
		width: 100%;
		height: 470rpx;
		display: flex;
		align-items: center;

	}

	.attention-content-img image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	.attention-content-text {
		font-size: 35rpx;
		font-family: "微软雅黑";
		display: block;
		padding: 15rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.attention-content-user {
		margin-left: 16rpx;
		margin-top: 15rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.attention-content-user-img {

		display: flex;
		justify-content: space-evenly;
	}

	.attention-content-user-img-image {
		border-radius: 50%;
		width: 45rpx;
		height: 45rpx;
		object-fit: cover;
		object-position: center;
	}

	.attention-content-user-line {
		display: flex;
		align-items: center;
	}

	/* .big_box{
	display: flex;
	flex-wrap: wrap;
    background-color: green;
}

.box_main{
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	height: 150rpx;
	margin-left: 30rpx;
	background-color: aqua;
} */
</style>